<!-- 套餐申请 -->
<template>
  <view class="detail">
    <view class="title">
      <view> 套餐明细 </view>
      <view class="material-ratio" @click="goMaterials">查看材料配比 </view>
    </view>
    <view class="list_box">
      <view class="list_item" v-for="(item, index) in list" :key="index">
        <view class="name">
          <view class="menu_name"> {{ item.menu_name }} </view>
          <view class="details" @click="details(item, index)"
            >详情<van-icon name="arrow-down" />
          </view>
        </view>
        <view> 包含菜名:{{ item.foods_name }} </view>
        <view class="goods_num">
          <view> 老师数量：{{ item.goods_num }} </view>
          <view> 学生数量：{{ item.goods_num_stu }} </view>
        </view>
        <view class="expect_time"> 期望送货日期:{{ item.expect_time }} </view>

        <view class="del_btn">
          <van-button type="default" @click="delProductList(index)"
            >删除</van-button
          >
        </view>
      </view>
    </view>
    <!-- 查看原材料 -->
    <van-overlay :show="show">
      <view class="wrapper">
        <view class="block">
          <scroll-view scroll-y="true" style="height: 900rpx;">
            <view class="title flex-bet">
            <view class="title-left">材料配比</view>
            <view>
              <view class="icon" @click="offShow">
                <van-icon name="clear" color="#3E3D3D" size="20px" />
              </view>
            </view>
          </view>
          <view class="table">
            <view class="row back-color">
              <view class="item-style">菜名</view>
              <view class="item-style">品名</view>
              <view class="item-style">数量</view>
              <view class="item-style">单位</view>
            </view>
            <view
              class="row"
              v-for="(item, index) in materialsList"
              :key="index"
            >
              <view class="item-style">{{ item.goods_name }}</view>
              <view class="item-style">{{ item.foods_name }}</view>
              <view class="item-style">{{ item.goods_num }}</view>
              <view class="item-style">{{ item.unit_name }}</view>
            </view>
            
          </view>
          </scroll-view>

        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
export default {
  props: ["list", "order_type"],

  data() {
    return {
     
      show: false,
      materialsList: [],
    };
  },
  watch:{
    list(v){
     
    }
  },

  onLoad() {},
  methods: {
    // 材料配比
    async goMaterials() {
      this.show = true;
     

      let res = await this.$ajax.onCreatematerials({
        menu: this.list,
      });
      if (res.code == 1) {
        this.materialsList = res.data.allgoodslist;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {
          this.show = false;
        }, 1000);
      }
    },

    // 关闭
    offShow() {
      this.show = false;
    },
    // 删除
    delProductList(index) {
    
      this.$emit("changeFormgoods_info",index)
    },

    // 详情
    details(item, index) {
      this.setDetailData({
        ...item,
        index, // 下标
      });
      uni.setStorageSync("order_type", this.order_type);
      uni.navigateTo({
        url:
          "../procurementPlan/purchaseDetails?index=" +
          index +
          "&order_type=" +
          this.order_type,
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss">
// 采购商品明细
.detail {
  width: 100%;
  height: 100%;
  margin-bottom: 20rpx;

  .title {
    display: flex;
    justify-content: space-between;
    color: rgba(153, 153, 153, 1);
    font-size: 26rpx;
    padding: 10rpx 20rpx;
    font-family: SourceHanSansSC-regular;

    // 材料配比
    .material-ratio {
      font-size: 24rpx;
      border: 1px solid;
      color: white;
      background: #2e88ee;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0rpx 10rpx;
      margin-left: 10rpx;
    }
  }

  .list_box {
    .list_item {
      width: 100%;
      line-height: 50rpx;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Arial;
      padding: 10rpx 20rpx;
      text-align: left;
      margin-bottom: 20rpx;

      .name {
        display: flex;
        justify-content: space-between;
        .menu_name {
          font-weight: bold;
        }

        .details {
          color: #2e88ee;
          color: rgba(46, 136, 238, 1);
          font-size: 24rpx;
          font-family: SourceHanSansSC-regular;
        }
      }

      .goods_num {
        display: flex;
        justify-content: space-between;
      }
      .expect_time {
        border-bottom: 0.5rpx solid #e7e4e4;
      }

      .del_btn {
        margin-bottom: 15rpx;
        margin-top: 15rpx;
        font-size: 24rpx;

        .van-button {
          color: red;
          width: 120rpx;
          height: 60rpx;
          border-radius: 24rpx;
          border: 1rpx solid #a7a7a7;
          font-size: 24rpx;
          font-family: SourceHanSansSC-regular;
        }
      }
    }
  }
}
// 弹框
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  .block {
    height: 900rpx;
    overflow: auto;
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 20rpx 20rpx;
    font-size: 28rpx;
    .title {
      .title-left {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .table {
      width: 100%;
      .item-style {
        width: 25%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        // overflow-wrap: anywhere;
        border-right: 1px solid #ccc;
      }
      .row {
        display: flex;
        border: 1px solid #ccc;
      }
      .back-color {
        background: #cdcccc;
      }
    }
  }
}
</style>